<template>
  <div>
    <div class="top">
      <div class="tleft">
        <span @click="$router.back()"><van-icon name="arrow-left" /></span>
        <h1>{{ name }}</h1>
      </div>
    </div>
    <div class="seat">
      <div class="seattop">
        <img
          src="https://obj.pipi.cn/festatic/fe-trade/public/img/screen.5725bf7d.png"
          alt=""
        />
        <p>{{ th.slice(0, 2) }}厅</p>
      </div>
      <div type="flex" justify="space-between" class="box" v-if="seat.seat">
        <van-row class="info" v-for="(i, bz) in zuo" :key="bz">
          <van-col
            span="2"
            class="seatInfo"
            v-for="(s, index) in i.seats"
            :key="index"
            style="width: 19rem; height: 19rem"
          >
            <span
              v-if="
                list.find(
                  (o, a) => i.seats.length - o.col == index && o.row - 1 == bz
                )
              "
            >
              <img
                :src="seat?.seat?.image?.seatLegends[1]?.legendIcon"
                style="width: 100%"
                alt=""
              />
            </span>
            <span v-else-if="Number(s.seatStatus) === 1">
              <!-- v-show="zuobiao.find((o,a)=>i.seats.length-o.col==index || o.row-1==bz)" -->
              <img
                v-show="
                  !zuobiao.find(
                    (o, a) => i.seats.length - o.col == index && o.row - 1 == bz
                  )
                "
                @click="changeState(s, index, bz)"
                :src="seat?.seat?.image?.seatLegends[0]?.legendIcon"
                style="width: 100%"
                alt=""
              />
              <!-- v-show="!weixuan"  -->
              <img
                @click="changeState(s)"
                v-show="
                  zuobiao.find(
                    (o, a) => i.seats.length - o.col == index && o.row - 1 == bz
                  )
                "
                :src="pic"
                style="width: 100%"
                alt=""
              />
            </span>

            <span v-else-if="Number(s.seatStatus) === 4">
              <img
                :src="seat?.seat?.image?.seatLegends[2]?.legendIcon"
                style="width: 100%"
                alt=""
              />
            </span>
          </van-col>
        </van-row>
      </div>
      <div
        class="mewInfo-1U8Wz"
        style="
          pointer-events: auto;
          transform: scale(0.833333);
          margin-top: 12.5px;
        "
      ></div>
      <div class="bottom">
        <div class="graphContainer-3GkZZ">
          <div
            class="graphItem-27_5X"
            v-for="item in seat.seat?.image?.seatLegends"
            :key="item.legendType"
          >
            <div class="graphIcon-3nTrR div-3Cvbv">
              <img :src="item.legendIcon" alt="" />
            </div>
            <span>{{ item?.legendName }}</span>
          </div>
        </div>
        <div class="seat-info">
          <div
            class="tongzhi"
            v-for="(note, noteindex) in detail?.reminder?.notice"
            :key="noteindex"
          >
            <van-notice-bar
              left-icon="volume-o"
              :scrollable="false"
              :text="note.detail"
            />
          </div>
          <div class="movie-info">
            <div class="movie-name">
              {{ $route.query.cinemaName }}
            </div>
            <div class="switch-show-btn">
              <span>切换场次</span><span class="icon-arrow"></span>
              <div class="lazyload-wrapper"><div></div></div>
            </div>
          </div>
          <div class="show-info" v-if="seat.relatedShow">
            <span style="color: rgb(102, 102, 102)">{{
              seat?.relatedShow[0]?.dateDesc
            }}</span
            ><span>{{ seat?.relatedShow[0]?.showDate }}</span
            ><span
              >{{ seat?.relatedShow[0]?.showTime }}-{{
                seat?.relatedShow[0]?.endTime
              }}</span
            ><span>{{ seat?.relatedShow[0]?.dim }}</span>
          </div>
          <div class="selectedSeat-2_b8h">
            <div class="border1px-1wAFR"></div>
            <ul class="selectedList-6pS_9">
              <li
                class="selectedItem-1M11s"
                v-for="(z, zindex) in zuobiao"
                :key="zindex"
              >
                <div class="seatDesc-wlI_S">{{ z.col }}排{{ z.row }}座</div>
                <div>
                  <span v-if="seat?.relatedShow">¥{{ baseSellPrice }}</span>
                </div>
                <div class="cancelBtn-3i9uJ" @click="del(z.col, z.row)"></div>
              </li>
            </ul>
            <div></div>
          </div>
        </div>
        <div class="submitBlock-2rCxe">
          <div class="submitBtn-3XNx4">
            <div class="disableText-2jIy7" v-show="weixuan">请先选座</div>
            <!-- <van-cell is-link @click="showPopup">请先选座</van-cell>
            <van-popup v-model:show="show">你还未登录</van-popup> -->
            <div
              class="submitDesc-2J-SG"
              v-if="seat?.relatedShow"
              v-show="!weixuan"
              @click="buy()"
            >
              ¥{{ sum }} 确认选座
            </div>
            <div class="cancelBtn-3i9uJ"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { ref } from "vue";
import axios from "@/api/axios.js";
import { useRoute } from "vue-router";
import { showSuccessToast, showFailToast } from "vant";
import { showConfirmDialog } from "vant";
const route = useRoute();
const router = useRouter();
const moviesid = ref(`${route.query.id},`);
const cinema = ref(`${route.query.cinemaName},`);
const tm = ref(`${route.query.tm},`);
const name = ref(`${route.query.ni},`);
const mvid = ref(`${route.query.mvid},`);
const price = ref(`${route.query.price}`);
const date = ref(`${route.query.date}`);
const tp = ref(`${route.query.tp}`);
const lang = ref(`${route.query.yan}`);
const img = ref(`${route.query.img}`);
const th = ref(`${route.query.th}`);
const seqNo = ref(`${route.query.seqNo}`);
const baseSellPrice = ref(`${route.query.price}`);
const zuobiao = ref([]);
var weixuan = true;
const list = [];
const sum = ref([]);
const summap = ref([]);

const changeState = (s) => {
  if (
    zuobiao.value.find(
      (o) => o.col == Number(s.columnId) && o.row == Number(s.rowId)
    )
  ) {
    var zuoobj = { col: Number(s.columnId), row: Number(s.rowId) };
    // console.log(zuoobj);

    zuobiao.value = zuobiao.value.filter((o) => {
      return !(o.col == zuoobj.col && o.row == zuoobj.row);
    });
  } else {
    zuobiao.value = [
      { row: Number(s.rowId), col: Number(s.columnId) },
      ...zuobiao.value,
    ];
  }
  if (zuobiao.value.length == 0) {
    weixuan = true;
  } else {
    weixuan = false;
  }
  // console.log("坐标", zuobiao.value.length);
  // const sumnum = computed(() => {
  sum.value = zuobiao.value.length * baseSellPrice.value;
  //  console.log("sum.value",sum.value);
  // summap.value=sum.value.toFixed(1)
};

// sum = (zuobiao.value.length * baseSellPrice).toFixed(1);

const del = (col, row) => {
  // console.log("触发删除");
  zuobiao.value = zuobiao.value.filter((o) => !(o.col == col && o.row == row));

  if (zuobiao.length == 0) {
    weixuan = true;
  } else {
    weixuan = false;
  }
};
const dlu = ref([]);
const savedData = JSON.parse(localStorage.getItem("timestamp"));
dlu.value = savedData;
const buy = () => {
  if (dlu.value === null) {
    const showConfirm = () => {
      showConfirmDialog({
        title: "请前往登录",
      })
        .then(() => {
          router.push("/loginin");
        })
        .catch(() => {
          // on cancel 取消按钮
        });
    };
    showConfirm();
  } else {
    showSuccessToast(`支付成功${sum.value}`)
    let obj = {
      cinemaId: moviesid.value,
      cinemaName: name.value.split(",")[0],
      seqNo: seqNo.value,
      movieId: mvid.value,
      zuoId: [...zuobiao.value],
      tm: tm.value,
      showDate: date.value,
      movieName: cinema.value,
      img: img.value,
      sum: sum.value,
    };
    // console.log(obj);
    let arr = JSON.parse(localStorage.getItem("lists")) || [];
    arr = [obj, ...arr];
    // console.log(arr);

    window.localStorage.setItem("lists", JSON.stringify([...arr]));
    router.go(0);
  }
};

let arr = JSON.parse(localStorage.getItem("lists")) || [];
arr = arr.filter((o) => o.seqNo == seqNo.value && o.cinemaId == moviesid.value);
// console.log(arr);
arr.forEach((o) => {
  // console.log(...o.zuoId);
  list.push(...o.zuoId);
});

//座位
const getseat = () =>
  axios.get(`https://apis.netstart.cn/maoyan/cinema/seat.json `);
const detail = ref([]);
const seatq = ref([]);
const seat = ref([]);
const zuo = ref([]);
const pic = ref([]);
const seatLegends = ref([]);
async function upseat() {
  const { data } = await getseat();
  detail.value = data.data;
  seat.value = data.data;
  zuo.value = data.data?.seat?.regions[0]?.rows;
  pic.value = data.data?.seat?.image?.selectedImages[0];
  seatLegends.value = data.data?.seat?.image?.seatLegends;
  seatq.value = detail.value?.seat?.regions[0]?.rows;
  // console.log("影院detail", pic.value);
}
upseat();
</script>

<style lang="scss" scoped>
.top {
  display: flex;
  height: 8vh;
  line-height: 8vh;
  font-size: 18rem;
  color: #fff;
  background-color: #e54847;
  .tleft {
    display: flex;
    width: 75vw;
    h1 {
      margin-left: 100rem;
    }
  }
}
:deep(.van-popover--light) {
  z-index: 2004;
  position: absolute;
  right: -80px;
  top: -7.5px;
}
.seattop {
  p {
    text-align: center;
    font-size: 16rem;
    color: #666;
  }
}
.box {
  margin-left: 20vw;
  align-items: center;
  justify-content: space-around;

  .seatInfo {
    box-sizing: border-box;
    margin: 4px;
    flex: 0 0 6%;
    display: inline-block;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.mewInfo-1U8Wz {
  width: 115px;
  height: 20px;
  margin: 15px auto 0;
  background: url(https://obj.pipi.cn/festatic/fe-trade/public/img/mew.7563c371.png)
    no-repeat 50%;
  background-size: contain;
}
.page-header.canary-theme {
  height: 50px;
  text-align: center;
  color: #fff;
  background: #e54848;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.graphContainer-2gh7b {
  display: flex;
  height: 46px;
  align-items: center;
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #999;
  .graphItem-3oyxn {
    -webkit-box-flex: 0;
    display: flex;
    -webkit-box-align: center;
    flex: none;
    margin-left: 15px;
    align-items: center;
    .graphIcon-sSbil {
      display: inline-block;
      width: 13px;
      height: 13px;
      margin-right: 5px;
      background: no-repeat 50%;
      background-size: contain;
    }
  }
}

.graphContainer-3GkZZ {
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #999;
  .graphItem-27_5X {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-flex: 0;
    flex: none;
    padding: 0 7px;
    height: 30px;
    .graphIcon-3nTrR {
      width: 13px;
      display: inline-block;
      height: 13px;
      margin-right: 5px;
      img {
        width: 100%;
      }
    }
  }
}
.seat-info {
  overflow: hidden;
  margin: 0 10px;
  padding-bottom: 15px;
  border-radius: 12px;
  box-shadow: 0 1px 8px 0 rgb(0 0 0 / 3%);
  font-size: 13px;
  color: #333;
  background-color: #fff;
  .notice {
    height: 36px;
    padding: 0 15px;
    font-size: 12px;
    color: #f90;
    background: #fff9eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .message {
      display: flex;
      div {
        img {
          width: 12px;
        }
      }
    }
    .notice-num {
      display: flex;
      align-items: center;
      span {
        img {
          width: 12px;
        }
      }
    }
  }
  .movie-info {
    position: relative;
    margin-top: 15px;
    padding: 0 15px;
    .movie-name {
      line-height: 21px;
      font-family: PingFangSC-Medium;
      font-size: 15px;
    }
    .switch-show-btn {
      position: absolute;
      top: 0;
      right: 15px;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      align-items: center;
      font-size: 12px;
      color: #2f8df9;
      .icon-arrow {
        display: inline-block;
        width: 12px;
        height: 12px;
        margin-left: 5px;
        background: url()
          no-repeat 50%;
        background-size: contain;
      }
    }
  }
  .show-info {
    margin-top: 5px;
    padding: 0 15px;
    line-height: 18px;
    color: #666;
    span {
      vertical-align: middle;
      margin-left: 5px;
    }
  }
  .selectedSeat-2_b8h {
    position: relative;
    font-size: 12px;
    .border1px-1wAFR {
      margin: 15px 15px 0;
      border-top: 1px solid #f6f6f6;
      transform: scaleY(0.5);
    }
    .selectedList-6pS_9 {
      overflow-x: auto;
      margin-top: 15px;
      white-space: nowrap;
      margin: 0;
      &::-webkit-scrollbar {
        display: none;
      }
      .selectedItem-1M11s {
        position: relative;
        display: inline-block;
        box-sizing: border-box;
        min-width: 81px;
        height: 45px;
        line-height: 17px;
        margin-right: 10px;
        padding: 0 20px 0 10px;
        border-radius: 4px;
        background: #f6f6f6;
        .cancelBtn-3i9uJ {
          position: absolute;
          top: 50%;
          right: 0;
          width: 20px;
          height: 20px;
          margin-top: -10px;
          background: url()
            no-repeat 2px;
          background-size: 8px 8px;
        }
      }
      .selectedItem-1M11s:first-child {
        margin-left: 15px;
      }
    }
  }
  .recommendSeat-3RXER {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin-top: 15px;
    padding-left: 15px;
    white-space: nowrap;
    .recommendList-2LOkv {
      margin-left: 10px;
      overflow-x: auto;
      &::-webkit-scrollbar {
        display: none;
      }
      .recommendItem-3gRnx {
        display: inline-block;
        width: 42px;
        height: 27px;
        line-height: 27px;
        margin-right: 10px;
        border-radius: 4px;
        text-align: center;
        font-size: 11px;
        background-color: #f6f6f6;
      }
    }
  }
}
.submitBlock-2rCxe {
  margin: 10px 10px 40px;
  padding-bottom: env(safe-area-inset-bottom);
  .submitBtn-3XNx4 {
    bottom: -22px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 44px;
    border-radius: 50px;
    text-align: center;
    font-family: PingFangSC-Medium;
    font-size: 17px;
    color: #fff;
    background-image: linear-gradient(
      270deg,
      rgba(255, 123, 16, 0.98),
      rgba(255, 154, 15, 0.98)
    );
    .disableText-2jIy7 {
      opacity: 0.4;
      font-weight: 500;
    }
  }
}
.notice-swipe {
  overflow: hidden;
  height: 16px;
  line-height: 16px;
}
.bottom {
  position: fixed;
  bottom: 0px;
  // height: 100%;
  width: 100%;
}
// .bottom {
//   background-color: #f4f4f4;
//   padding: 15rem;
//   margin-bottom: 50rem;
//   .xinxibox {
//     width: 350rem;
//     background-color: #fff;
//     padding: 10rem;
//     margin: 5rem 0 5rem;
//     .name {
//       font-size: 13rem;
//       color: #333;
//     }
//     .shijian {
//       display: flex;
//       font-size: 13rem;
//       color: #666;
//       margin: 5rem;
//       .time {
//         margin-left: 10rem;
//       }
//       .tp {
//         margin-left: 10rem;
//       }
//       .lang {
//         margin-left: 10rem;
//       }
//     }
//     .zuowei {
//       display: flex;
//       flex-wrap: wrap;
//       .yixuan {
//         width: 50rem;
//         margin: 5rem 3rem;
//         text-align: center;
//         display: flex;
//         .zuoeight {
//           margin-left: 3rem;
//           line-height: 30rem;
//         }
//       }
//     }
//   }
// }
// .xuanzuo {
//   width: 365rem;
//   height: 44rem;
//   margin: 5rem auto;
//   color: #fff;
//   background-color: #f90;
//   border-radius: 15rem;
//   display: flex;
//   position: fixed;
//   bottom: 0;
//   left: 0;
//   right: 0;
//   z-index: 999;
//   justify-content: center;
//   align-items: center;
// }
</style>
